import { UseModalResult } from '@/hooks/useModal'
import { Modal } from 'antd'
import './TimeLineModal.less'
import React, { useRef, useEffect, useState, useCallback } from 'react'

// 组件属性接口定义
interface IProps {
  modalInstance: UseModalResult<any> // 模态框实例，用于控制模态框的显示和隐藏
  current?: number // 当前所处的阶段索引，用于高亮显示当前状态
}

// 时间线事件接口定义
interface TimelineEvent {
  title: string // 事件标题，如"正常签收"、"已发车"等
  details: Array<{ label: string; value: string | undefined }> // 事件详细信息，包含标签和值
  image?: string // 可选的图片URL
  dateTime: string // 事件发生的时间
}

// 时间线数据
const timelineData: TimelineEvent[] = [
  {
    title: '正常签收',
    details: [
      { label: '客户签收人', value: '小明' },
      { label: '备注信息', value: '本人签收' },
      { label: '操作人', value: '小红' },
      { label: '电话', value: '12345678910' },
    ],
    dateTime: '2020-06-07 下午 03:45',
  },
  {
    title: '已发车',
    details: [
      { label: '内容', value: 'content' },
      { label: '车牌号', value: 'carNo' },
      { label: '备注信息', value: 'remake' },
      { label: '操作人', value: 'operator' },
      { label: '电话', value: 'operatorPhone' },
      { label: '操作地点', value: 'operatorAddr1萨达达达多少' },
    ],
    dateTime: '2020-06-07 下午 03:45',
  },
  {
    title: '同城派送中',
    details: [
      { label: '派送区域', value: '浙江省杭州市滨江区' },
      { label: '配送员状态', value: '正在派送' },
      { label: '车牌号', value: '浙A12345' },
      { label: '操作人', value: '小红' },
      { label: '电话', value: '123456789' },
    ],
    dateTime: '2020-06-07 下午 03:45',
  },
  {
    title: '回单上传',
    details: [
      { label: '回单类型', value: 'type' },
      { label: '操作人', value: '小明' },
    ],
    dateTime: '2020-06-07 下午 03:45',
  },
  {
    title: '已完成',
    details: [
      { label: '操作人', value: '张三' },
      { label: '备注', value: '所有环节已完成' },
    ],
    dateTime: '2020-06-08 上午 10:00',
  },
  {
    title: '待签收',
    details: [{ label: '当前状态', value: '等待客户签收' }],
    dateTime: '2020-06-08 下午 02:00',
  },
  {
    title: '派送异常',
    details: [
      { label: '异常原因', value: '地址不详' },
      { label: '联系人', value: '李四' },
      { label: '联系电话', value: '9876543210' },
    ],
    dateTime: '2020-06-08 下午 04:30',
  },
  {
    title: '重新派送',
    details: [
      { label: '派送员', value: '王五' },
      { label: '预计时间', value: '今日内' },
    ],
    dateTime: '2020-06-09 上午 09:00',
  },
  {
    title: '派送成功',
    details: [
      { label: '签收人', value: '客户本人' },
      { label: '签收时间', value: '2020-06-09 下午 01:00' },
    ],
    dateTime: '2020-06-09 下午 01:00',
  },
  {
    title: '退回仓库',
    details: [
      { label: '原因', value: '客户拒收' },
      { label: '仓库地址', value: 'XX市XX区XX仓库' },
    ],
    dateTime: '2020-06-10 上午 09:00',
  },
  {
    title: '入库完成',
    details: [
      { label: '操作员', value: '赵六' },
      { label: '备注', value: '商品完好入库' },
    ],
    dateTime: '2020-06-10 下午 02:00',
  },
  {
    title: '等待调度',
    details: [{ label: '当前状态', value: '等待再次调度发货' }],
    dateTime: '2020-06-11 上午 11:00',
  },
  // Add more data to test the snake pattern
  {
    title: '再次发车',
    details: [{ label: '状态', value: '再次上路' }],
    dateTime: '2020-06-11 下午 01:00',
  },
  {
    title: '中转站',
    details: [{ label: '地点', value: '中转站A' }],
    dateTime: '2020-06-11 下午 03:00',
  },
  {
    title: '出库',
    details: [{ label: '状态', value: '已出库' }],
    dateTime: '2020-06-11 下午 05:00',
  },
]

// 时间线常量配置
const TIMELINE_CONSTANTS = {
  CARD_WIDTH: 280, // 卡片宽度（像素）
  CARD_HEIGHT: 150, // 卡片高度（像素）
  HORIZONTAL_CARD_GAP: 60, // 卡片之间的水平间距（像素）
  VERTICAL_ROW_GAP: 100, // 行之间的垂直间距（像素）
  DOT_SIZE: 16, // 时间线圆点的大小（像素）
  DOT_OFFSET_Y: 160, // 圆点的垂直偏移量（像素）
  LINE_STROKE_WIDTH: 2, // 连接线的宽度（像素）
  INITIAL_TOP_OFFSET: 50, // 初始顶部偏移量（像素）
  BEND_RADIUS: 15, // 连接线转弯处的圆角半径（像素）
  CARDS_PER_ROW: 3, // 每行显示的卡片数量
}

const TimeLineModal: React.FC<IProps> = ({ modalInstance, current = 0 }) => {
  // DOM引用
  const itemRefs = useRef<(HTMLDivElement | null)[]>([]) // 存储所有卡片元素的引用，用于获取位置信息
  const dotRefs = useRef<(HTMLDivElement | null)[]>([]) // 存储所有圆点元素的引用，用于获取位置信息
  const timelineContainerRef = useRef<HTMLDivElement>(null) // 时间线容器的引用，用于获取容器宽度

  // 状态管理
  const [svgPaths, setSvgPaths] = useState<string[]>([]) // 存储SVG路径数据，用于绘制连接线
  const [svgHeight, setSvgHeight] = useState(0) // SVG容器高度，用于设置容器大小
  const [containerWidth, setContainerWidth] = useState(0) // 容器宽度，用于计算布局

  // 计算常量
  const HORIZONTAL_VISUAL_OFFSET_FROM_EDGE = TIMELINE_CONSTANTS.LINE_STROKE_WIDTH / 2 // 水平视觉偏移量，用于调整线条位置
  const X_COORD_FOR_RIGHT_TURN_VERTICAL_SEGMENT = containerWidth - HORIZONTAL_VISUAL_OFFSET_FROM_EDGE // 右转垂直段X坐标
  const X_COORD_FOR_LEFT_TURN_VERTICAL_SEGMENT = HORIZONTAL_VISUAL_OFFSET_FROM_EDGE // 左转垂直段X坐标

  // 计算每行的总宽度（包括卡片和间距）
  const rowTotalWidth =
    TIMELINE_CONSTANTS.CARDS_PER_ROW * TIMELINE_CONSTANTS.CARD_WIDTH +
    (TIMELINE_CONSTANTS.CARDS_PER_ROW - 1) * TIMELINE_CONSTANTS.HORIZONTAL_CARD_GAP

  // 计算左右边距，使内容居中
  const LEFT_RIGHT_PADDING = (containerWidth - rowTotalWidth) / 2

  // 设置卡片引用 - 用于获取每个卡片DOM元素的位置信息
  const setItemRef = useCallback((el: HTMLDivElement | null, index: number) => {
    if (el) {
      itemRefs.current[index] = el
    }
  }, [])

  // 设置圆点引用 - 用于获取每个圆点DOM元素的位置信息
  const setDotRef = useCallback((el: HTMLDivElement | null, index: number) => {
    if (el) {
      dotRefs.current[index] = el
    }
  }, [])

  // 计算位置并绘制线条 - 核心布局计算函数
  const calculatePositionsAndDrawLines = useCallback(() => {
    // 检查所有元素是否都已渲染完成
    const allItemsRendered = timelineData.every((_, i) => itemRefs.current[i] && dotRefs.current[i])
    if (!allItemsRendered || containerWidth === 0) {
      // 如果元素未完全渲染或容器宽度为0，则等待下一帧继续
      requestAnimationFrame(calculatePositionsAndDrawLines)
      return
    }

    const paths: string[] = [] // 存储所有路径
    let maxTotalHeight = 0 // 记录最大高度
    const calculatedDotPositions: { x: number; y: number }[] = [] // 存储计算后的圆点位置

    // 计算每个卡片和圆点的位置
    timelineData.forEach((item, i) => {
      const itemElement = itemRefs.current[i]

      const dotElement = dotRefs.current[i]

      console.log(itemElement, dotElement, 'itemElement')

      if (itemElement && dotElement) {
        console.log(i)

        const rowNumber = Math.floor(i / TIMELINE_CONSTANTS.CARDS_PER_ROW) // 计算当前行号
        const itemInRowIndex = i % TIMELINE_CONSTANTS.CARDS_PER_ROW // 计算在当前行中的索引
        const isLtrRow = rowNumber % 2 === 0 // 判断是否是左到右的行（偶数行从左到右，奇数行从右到左）

        // 计算基础Y坐标（圆点的Y坐标）
        const dotY =
          TIMELINE_CONSTANTS.INITIAL_TOP_OFFSET +
          rowNumber * (TIMELINE_CONSTANTS.CARD_HEIGHT + TIMELINE_CONSTANTS.VERTICAL_ROW_GAP) +
          TIMELINE_CONSTANTS.CARD_HEIGHT +
          10

        // 计算卡片位置
        let x: number
        if (isLtrRow) {
          // 左到右的行：从左边界开始计算
          x =
            LEFT_RIGHT_PADDING +
            itemInRowIndex * (TIMELINE_CONSTANTS.CARD_WIDTH + TIMELINE_CONSTANTS.HORIZONTAL_CARD_GAP)
        } else {
          // 右到左的行：从右边界开始计算
          x =
            containerWidth -
            LEFT_RIGHT_PADDING -
            TIMELINE_CONSTANTS.CARD_WIDTH -
            itemInRowIndex * (TIMELINE_CONSTANTS.CARD_WIDTH + TIMELINE_CONSTANTS.HORIZONTAL_CARD_GAP)
        }

        // 计算圆点位置（圆点在卡片下方居中）
        const dotX = x + TIMELINE_CONSTANTS.CARD_WIDTH / 2 - TIMELINE_CONSTANTS.DOT_SIZE / 2

        // 设置卡片位置（卡片在圆点上方）
        itemElement.style.position = 'absolute'
        itemElement.style.left = `${x}px`
        itemElement.style.top = `${dotY - TIMELINE_CONSTANTS.CARD_HEIGHT - 10}px`

        // 设置圆点位置
        dotElement.style.position = 'absolute'
        dotElement.style.left = `${dotX}px`
        dotElement.style.top = `${dotY}px`

        // 存储计算后的圆点位置（用于绘制连接线）
        calculatedDotPositions.push({
          x: dotX + TIMELINE_CONSTANTS.DOT_SIZE / 2,
          y: dotY + TIMELINE_CONSTANTS.DOT_SIZE / 2,
        })

        // 更新最大高度（用于设置容器高度）
        maxTotalHeight = Math.max(
          maxTotalHeight,
          dotY + TIMELINE_CONSTANTS.DOT_SIZE + TIMELINE_CONSTANTS.VERTICAL_ROW_GAP,
        )
      }
    })

    // 生成连接线路径
    calculatedDotPositions.forEach((currentDot, i) => {
      if (i === 0) {
        // 第一条线的处理：从边缘连接到第一个点
        const isFirstRowLtr = Math.floor(i / TIMELINE_CONSTANTS.CARDS_PER_ROW) % 2 === 0
        const startX = isFirstRowLtr ? X_COORD_FOR_LEFT_TURN_VERTICAL_SEGMENT : X_COORD_FOR_RIGHT_TURN_VERTICAL_SEGMENT
        paths.push(`M ${startX} ${currentDot.y} L ${currentDot.x} ${currentDot.y}`)
      }

      if (i > 0) {
        const prevDot = calculatedDotPositions[i - 1]
        const prevRowNumber = Math.floor((i - 1) / TIMELINE_CONSTANTS.CARDS_PER_ROW)
        const currentRowNumber = Math.floor(i / TIMELINE_CONSTANTS.CARDS_PER_ROW)
        const isSameRowSegment = prevRowNumber === currentRowNumber

        if (isSameRowSegment) {
          // 同一行的连接线：直接连接两个点
          paths.push(`M ${prevDot.x} ${prevDot.y} L ${currentDot.x} ${currentDot.y}`)
        } else {
          // 行间连接线：需要处理转弯
          const isPrevRowLtr = prevRowNumber % 2 === 0
          const turnVerticalLineX = isPrevRowLtr
            ? X_COORD_FOR_RIGHT_TURN_VERTICAL_SEGMENT
            : X_COORD_FOR_LEFT_TURN_VERTICAL_SEGMENT
          const sweepFlag1 = isPrevRowLtr ? 1 : 0 // 控制圆弧方向
          const sweepFlag2 = isPrevRowLtr ? 1 : 0 // 控制圆弧方向
          const bendOffset = isPrevRowLtr ? -TIMELINE_CONSTANTS.BEND_RADIUS : TIMELINE_CONSTANTS.BEND_RADIUS

          // 生成带圆弧的路径：包含直线段和圆弧段
          const pathSegment =
            `M ${prevDot.x} ${prevDot.y}` + // 移动到上一个点
            `L ${turnVerticalLineX + bendOffset} ${prevDot.y}` + // 水平线
            `A ${TIMELINE_CONSTANTS.BEND_RADIUS} ${
              TIMELINE_CONSTANTS.BEND_RADIUS
            } 0 0 ${sweepFlag1} ${turnVerticalLineX} ${prevDot.y + TIMELINE_CONSTANTS.BEND_RADIUS}` + // 第一个圆弧
            `L ${turnVerticalLineX} ${currentDot.y - TIMELINE_CONSTANTS.BEND_RADIUS}` + // 垂直线
            `A ${TIMELINE_CONSTANTS.BEND_RADIUS} ${TIMELINE_CONSTANTS.BEND_RADIUS} 0 0 ${sweepFlag2} ${
              turnVerticalLineX + bendOffset
            } ${currentDot.y}` + // 第二个圆弧
            `L ${currentDot.x} ${currentDot.y}` // 水平线到当前点
          paths.push(pathSegment)
        }
      }

      if (i === timelineData.length - 1) {
        // 最后一条线的处理：从最后一个点连接到边缘
        const isLastRowLtr = Math.floor(i / TIMELINE_CONSTANTS.CARDS_PER_ROW) % 2 === 0
        const endX = isLastRowLtr ? X_COORD_FOR_RIGHT_TURN_VERTICAL_SEGMENT : X_COORD_FOR_LEFT_TURN_VERTICAL_SEGMENT
        paths.push(`M ${currentDot.x} ${currentDot.y} L ${endX} ${currentDot.y}`)
      }
    })

    // 更新状态
    setSvgPaths(paths)
    setSvgHeight(maxTotalHeight + TIMELINE_CONSTANTS.INITIAL_TOP_OFFSET)
  }, [
    containerWidth,
    LEFT_RIGHT_PADDING,
    X_COORD_FOR_RIGHT_TURN_VERTICAL_SEGMENT,
    X_COORD_FOR_LEFT_TURN_VERTICAL_SEGMENT,
  ])

  // 监听容器宽度变化
  useEffect(() => {
    if (modalInstance.open) {
      const updateContainerWidth = () => {
        if (timelineContainerRef.current) {
          setContainerWidth(timelineContainerRef.current.offsetWidth)
        }
      }

      updateContainerWidth()
      window.addEventListener('resize', updateContainerWidth)

      return () => {
        window.removeEventListener('resize', updateContainerWidth)
      }
    }
  }, [modalInstance.open])

  // 当容器宽度变化时重新计算位置
  useEffect(() => {
    if (modalInstance.open && containerWidth > 0) {
      requestAnimationFrame(calculatePositionsAndDrawLines)
    }
  }, [modalInstance.open, containerWidth, calculatePositionsAndDrawLines])

  // 渲染组件
  return (
    <Modal
      width={1200}
      title="物流状态查询"
      footer={null}
      maskClosable={false}
      open={modalInstance.open}
      onCancel={modalInstance.closeModal}
      confirmLoading={modalInstance.confirmLoading}
    >
      <div
        ref={timelineContainerRef}
        className="timeline-container"
        style={{ width: '100%', height: `${svgHeight}px`, position: 'relative' }}
      >
        {/* SVG时间线：用于绘制连接线 */}
        <svg className="timeline-svg" style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%' }}>
          {svgPaths.map((path, index) => (
            <path
              key={index}
              d={path}
              stroke="#d9d9d9"
              strokeWidth={TIMELINE_CONSTANTS.LINE_STROKE_WIDTH}
              fill="none"
              strokeDasharray="5,5"
            />
          ))}
        </svg>

        {/* 渲染时间线卡片和圆点 */}
        {timelineData.map((event, i) => {
          const isActive = i === current // 判断是否是当前活动状态

          return (
            <React.Fragment key={i}>
              {/* 时间线卡片：显示事件信息 */}
              <div
                ref={(el) => setItemRef(el, i)}
                className={`timeline-card-container ${isActive ? 'active' : ''}`}
                style={{ width: TIMELINE_CONSTANTS.CARD_WIDTH, height: TIMELINE_CONSTANTS.CARD_HEIGHT }}
              >
                <div className="timeline-card">
                  <div className="timeline-card-header">
                    <span className="title">{event.title}</span>
                    <div className="timeline-datetime">{event.dateTime}</div>
                  </div>
                  <div className="timeline-card-details">
                    {/* 将details内容拼接成一个字符串 */}
                    {event.details
                      .filter((detail) => detail.value)
                      .map((detail) => `${detail.label}: ${detail.value}`)
                      .join('; ')}
                  </div>
                </div>
              </div>
              {/* 时间线圆点：用于连接线 */}
              <div
                ref={(el) => setDotRef(el, i)}
                className={`timeline-dot ${isActive ? 'active' : ''}`}
                style={{ width: TIMELINE_CONSTANTS.DOT_SIZE, height: TIMELINE_CONSTANTS.DOT_SIZE }}
              ></div>
            </React.Fragment>
          )
        })}
      </div>
    </Modal>
  )
}

export default TimeLineModal
